<template>
  <view class="coin-deduction-page">
    
    <!-- 游乐项目选择 -->
    <view class="section">
      <view class="info-item">
        <text class="info-label">游乐项目</text>
        <picker 
          @change="handleProjectChange" 
          :value="selectedProjectIndex" 
          :range="gameProjects">
          <view class="picker-display">
            <text>{{ gameProjects[selectedProjectIndex] }}</text>
            <text class="arrow">▼</text>
          </view>
        </picker>
      </view>
    </view>
    
    <!-- 项目信息 -->
    <view class="section">
      <view class="info-item">
        <text class="info-label">游乐项目</text>
        <text class="info-value">{{ currentProjectInfo.name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">消费类型</text>
        <text class="info-value">{{ currentProjectInfo.consumptionType }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">每局单价</text>
        <text class="info-value">{{ currentProjectInfo.pricePerGame }}</text>
      </view>
    </view>
    
    <!-- 会员查询 -->
    <view class="section">
      <view class="info-item">
        <text class="info-label">会员查询</text>
        <button class="query-btn" @click="goToCheckMember">查询</button>
      </view>
      <view class="info-item">
        <text class="info-label">姓名</text>
        <text class="info-value">{{ memberInfo.name }}</text>
      </view>
    </view>
    
    <!-- 游玩次数 -->
    <view class="section">
      <view class="info-item">
        <text class="info-label">游玩次数</text>
        <input 
          type="number" 
          v-model.number="playTimes" 
          placeholder="输入游玩次数" 
          class="play-times-input"
          @input="calculateTotalAmount"
        />
      </view>
    </view>
    
    <!-- 合计金额 -->
    <view class="section">
      <view class="info-item">
        <text class="info-label">合计金额</text>
        <text class="total-amount">{{ totalAmount }}预存款</text>
      </view>
    </view>
    
    <!-- 确认扣币按钮 -->
    <view class="confirm-section">
      <button class="confirm-button" @click="showPasswordModal">确认扣币</button>
    </view>
    
    <!-- 密码弹窗组件 -->
    <password-modal 
      :visible="passwordModalVisible" 
      title="确认扣币" 
      label="请输入会员密码" 
      @confirm="handlePasswordConfirm" 
      @cancel="handlePasswordCancel"
    />
  </view>
</template>

<script>
// 引入密码弹窗组件
import PasswordModal from '@/components/password-modal/password-modal.vue'

export default {
  name: 'CoinDeduction',
  components: {
    PasswordModal
  },
  data() {
    return {
      // 游乐项目列表
      gameProjects: ['闸机1', '闸机2', '闸机3'],
      selectedProjectIndex: 0,
      // 当前项目信息
      currentProjectInfo: {
        name: '闸机1',
        consumptionType: '预存款',
        pricePerGame: 2
      },
      // 会员信息
      memberInfo: {
        name: '张三'
      },
      // 游玩次数
      playTimes: 0,
      // 合计金额
      totalAmount: 15,
      // 密码弹窗显示状态
      passwordModalVisible: false
    }
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.coinDeduction')
  	});
  },
  methods: {
    // 处理项目选择变化
    handleProjectChange(e) {
      this.selectedProjectIndex = e.mp.detail.value;
      const selectedProject = this.gameProjects[this.selectedProjectIndex];
      // 更新项目信息（这里可以根据实际情况从接口获取）
      this.currentProjectInfo.name = selectedProject;
      this.calculateTotalAmount();
    },
    
    // 计算合计金额
    calculateTotalAmount() {
      if (this.playTimes > 0) {
        this.totalAmount = this.playTimes * this.currentProjectInfo.pricePerGame;
      } else {
        // 如果没有输入次数，保持默认值
        this.totalAmount = 15;
      }
    },
    
    // 跳转到会员查询页面
    goToCheckMember() {
      uni.navigateTo({
        url: '/pages/home/check-member'
      });
    },
    
    // 显示密码弹窗
    showPasswordModal() {
      if (!this.memberInfo.name || this.memberInfo.name === '') {
        uni.showToast({
          title: '请先查询会员',
          icon: 'none'
        });
        return;
      }
      if (this.playTimes <= 0) {
        uni.showToast({
          title: '请输入游玩次数',
          icon: 'none'
        });
        return;
      }
      this.passwordModalVisible = true;
    },
    
    // 处理密码确认
    handlePasswordConfirm(password) {
      // 这里可以调用接口进行密码验证和扣币操作
      console.log('密码确认:', password);
      
      // 模拟扣币成功
      uni.showToast({
        title: '扣币成功',
        icon: 'success'
      });
      
      this.passwordModalVisible = false;
      
      // 可以添加重置或其他后续操作
      this.playTimes = 0;
      this.calculateTotalAmount();
    },
    
    // 处理密码取消
    handlePasswordCancel() {
      this.passwordModalVisible = false;
    }
  }
}
</script>

<style scoped>
.coin-deduction-page {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}


.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.picker-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    color: #333;
  }

  .arrow {
    color: #999;
    font-size: 24rpx;
    margin-left: 10rpx;
  }

/* 移除不必要的容器样式 */
  .section-header,
  .section-title {
    display: none;
  }

.info-item {
  display: flex;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.info-label {
  color: #666;
  width: 200rpx;
}

.info-value {
  color: #333;
  flex: 1;
}

.query-btn {
    background-color: #f03c2e;
    color: #fff;
    border: none;
    padding: 10rpx 30rpx;
    font-size: 28rpx;
    border-radius: 8rpx;
    line-height: 1.5;
    margin-left: 20rpx;
  }

.play-times-input {
    border: none;
    text-align: right;
    font-size: 28rpx;
    color: #333;
    background: transparent;
}

.total-amount {
    font-size: 32rpx;
    color: #f03c2e;
    font-weight: bold;
}

.confirm-section {
  margin-top: 40rpx;
  padding: 0 30rpx;
}

.confirm-button {
  width: 100%;
  background-color: #f03c2e;
  color: #fff;
  border: none;
  padding: 30rpx 0;
  font-size: 32rpx;
  border-radius: 16rpx;
  line-height: 1.5;
}
</style>
